<template>

  <el-dialog :title="activeName" :visible.sync="showDetailStoreDialog" center width="1000px">

    <el-tabs tab-position="left"  v-model="activeName" style="height: 800px;">
      <el-tab-pane label="编辑店铺" name="编辑店铺">

        <div style="margin:0 auto;height:800px;padding:50px 50px 100px;overflow:scroll;">
          <el-form :model="storeDataForm" :rules="rules" ref="storeDataForm">
            <el-form-item label="店铺名称" :label-width="formLabelWidth" prop="name">
              <el-input v-model="storeDataForm.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="所属用户" :label-width="formLabelWidth" prop="customer_id">
              <el-select v-model="storeDataForm.customer_id" filterable placeholder="请选择">
                <el-option
                  v-for="item in customerList"
                  :key="item.customer_id"
                  :label="item.nickname"
                  :value="item.customer_id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="会员状态" :label-width="formLabelWidth" prop="expire_date">
              <div>
                <div v-if="storeDataForm.expire_date">
                  <el-input style="width:50px;" v-model="storeDataForm.member_price"></el-input>
                  <span>元会员</span><span style="margin-left:10px;">截止日期</span>
                  <el-date-picker :clearable="false" v-model="storeDataForm.expire_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="display: inline-block;width: 210px;"></el-date-picker>
                </div>
                <span v-else>无</span>
              </div>
            </el-form-item>

            <el-form-item label="所属省份和城市" :label-width="formLabelWidth">
              <el-cascader placeholder="试试搜索：广东"
                           :options="provinceAndCityList"
                           :props="{ value: 'value', label: 'label'}"
                           @change="handleChange"
                           v-model = "addressList"
                           filterable>
              </el-cascader>
            </el-form-item>


            <el-form-item label="详细地址" :label-width="formLabelWidth">
              <el-input v-model="storeDataForm.address" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="选择联系人" :label-width="formLabelWidth" prop="contact">
              <el-select v-model="storeDataForm.contact" filterable placeholder="请选择">
                <el-option
                  v-for="(item,index) in organizationList"
                  :key="index"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth" prop="telephone">
              <el-input v-model="storeDataForm.telephone" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item :label="'联系人二维码'" :label-width="formLabelWidth">
              <div class="upload_head_img">
                <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="upload_picture" class="avatar-uploader" action="">
                  <img v-if="storeDataForm.wechat_qrcode" :src="storeDataForm.wechat_qrcode" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
              </div>
            </el-form-item>

            <el-form-item :label="'群二维码'" :label-width="formLabelWidth">
              <div class="upload_head_img">
                <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload_group" :http-request="upload_picture_group" class="avatar-uploader" action="">
                  <img v-if="storeDataForm.group_qrcode" :src="storeDataForm.group_qrcode" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item :label="'推荐课程开关'" :label-width="formLabelWidth">
              <el-switch
                v-model="storeDataForm.is_recommend"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
            <el-form-item label="推荐课程标题" :label-width="formLabelWidth" prop="introduction_title">
              <el-input v-model="storeDataForm.introduction_title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="'课程图片'" :label-width="formLabelWidth">
              <div class="upload_head_img">
                <el-upload :show-file-list="false" :before-upload="before_introduction_img_Upload_group" :http-request="upload_picture_introduction_img" class="avatar-uploader" action="">
                  <img v-if="storeDataForm.introduction_img" :src="storeDataForm.introduction_img" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
              </div>
            </el-form-item>
            <!-- -------------------------------------四期新增---------------------------------------- -->
            <el-form-item :label="'机构图片'" :label-width="formLabelWidth">
              <div class="upload_head_img">
                <el-upload :show-file-list="false" :before-upload="before_introduction_img_Upload_group" :http-request="upload_picture_store_img" class="avatar-uploader" action="">
                  <img v-if="storeDataForm.store_img" :src="storeDataForm.store_img" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item label="机构介绍" :label-width="formLabelWidth" prop="introduction_title">
              <el-input v-model="storeDataForm.store_introduction" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item :label="'机构logo'" :label-width="formLabelWidth">
              <div class="upload_head_img">
                <el-upload :show-file-list="false" :before-upload="before_introduction_img_Upload_group" :http-request="upload_picture_store_logo" class="avatar-uploader" action="">
                  <img v-if="storeDataForm.store_logo" :src="storeDataForm.store_logo" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item label="培训科目:" :label-width="formLabelWidth" prop="introduction_title">
              <el-checkbox-group v-model="storeDataForm.subjects_id">
                <el-checkbox v-for="subjects in subject" :label="subjects.ids" :key="subjects.id">{{subjects.name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="注册店铺:" :label-width="formLabelWidth">
              <el-switch
                  style="display: block"
                  v-model="storeDataForm.display_button"
                  active-color="#13ce66"
                  inactive-color="#C0CCDA"
                >
              </el-switch>
            </el-form-item>
            <!-- -------------------------------------四期新增---------------------------------------- -->
          </el-form>
          <div slot="footer" class="dialog-footer" style="position: relative; left: 90px">
            <el-button @click="cancelSubmit">取 消</el-button>
            <el-button type="primary" @click="submitStore('storeDataForm')">确 定</el-button>
          </div>
        </div>

      </el-tab-pane>
      <el-tab-pane label="绑卡进件" name="绑卡进件">
          <div style="margin:0 auto;height:800px;padding:50px 50px 100px;overflow:scroll;">
            <el-steps :space="200" :active="active" align-center>
              <el-step title="进件信息"></el-step>
              <el-step title="汇付进件"></el-step>
              <el-step title="开通业务"></el-step>
              <el-step title="公众号设置"></el-step>
              <el-step title="分账开通"></el-step>
              <el-step title="钱包开通"></el-step>
            </el-steps>
            <el-form ref="storeIdentificationForm"  :model="store_identication_form"  :rules="store_identication_rules" style="padding-top:36px;" label-width="120px" v-if="active==0" size="mini">
              <el-form-item label="绑卡类型">
                <el-radio-group v-model="store_identication_form.type" @change="handleChangeType">
                  <el-radio :label="0">自然人（个人）账号</el-radio>
                  <el-radio :label="1">企业商户账号</el-radio>
                </el-radio-group>
              </el-form-item>
              <!---------------------------机构信息------------------------>
              <p>机构信息</p>

              <el-form-item label="机构名称" prop="organization_name">
                <el-input placeholder="请输入机构名称" v-model="store_identication_form.organization_name"></el-input>
              </el-form-item>
              <el-form-item label="公司名称" prop="company_name" v-if="store_identication_form.type==1">
                <el-input placeholder="请输入公司名称" v-model="store_identication_form.company_name"></el-input>
              </el-form-item>
              <el-form-item label="营业执照" prop="business_licences" v-if="store_identication_form.type==1">
                <div class="upload_head_img">
                  <el-upload
                    :show-file-list="false"
                    :before-upload="beforeBusinessLicencesUpload"
                    :http-request="upload_business_licences"
                    class="avatar-uploader"
                    action=""
                  >
                    <img v-if="store_identication_form.business_licences" :src="store_identication_form.business_licences" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"/>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="统一社会信用代码" prop="unified_social_credit_code" v-if="store_identication_form.type==1">
                <el-input placeholder="请输入统一社会信用代码" v-model="store_identication_form.unified_social_credit_code"></el-input>
              </el-form-item>
              <el-form-item label="所属省份和城市">
                <el-cascader
                  placeholder="试试搜索：广东"
                  :options="provinceAndCityList"
                  :props="{ value: 'value', label: 'label'}"
                  @change="handleChange"
                  v-model = "addressList"
                  @click="handleChanges(addressList)"
                  filterable
                >
                </el-cascader>
              </el-form-item>
              <el-form-item label="详细地址" prop="address">
                <el-input placeholder="请输入详细地址" v-model="store_identication_form.address"></el-input>
              </el-form-item>
              <el-form-item :label="store_identication_form.type==1?'公司前台照':'门头照'">
                <div class="upload_head_img">
                  <el-upload
                    :show-file-list="false"
                    :before-upload="beforeDoorPhotoUpload"
                    :http-request="upload_door_photo"
                    class="avatar-uploader"
                    action=""
                  >
                    <img v-if="store_identication_form.door_photo" :src="store_identication_form.door_photo" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"/>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item :label="store_identication_form.type==1?'公司环境照':'店内环境照'">
                <div class="upload_head_img">
                  <el-upload
                    :show-file-list="false"
                    :before-upload="beforeInStorePhotoUpload"
                    :http-request="upload_in_store_photo"
                    class="avatar-uploader"
                    action=""
                  >
                    <img v-if="store_identication_form.in_store_photo" :src="store_identication_form.in_store_photo" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"/>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="公司环境照2" v-if="store_identication_form.type==1">
                <div class="upload_head_img">
                  <el-upload
                    :show-file-list="false"
                    :before-upload="beforeInStorePhoto2Upload"
                    :http-request="upload_in_store_photo2"
                    class="avatar-uploader"
                    action=""
                  >
                    <img v-if="store_identication_form.in_store_photo2" :src="store_identication_form.in_store_photo2" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"/>
                  </el-upload>
                </div>
              </el-form-item>
              <!------------------------法人信息------------------------>
              <p>法人信息</p>
              <el-form-item label="法人姓名" prop="name_of_cardholder">
                <el-input placeholder="法人姓名" v-model="store_identication_form.name_of_cardholder"></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="id_of_cardholder">
                <el-input placeholder="身份证号" v-model="store_identication_form.id_of_cardholder"></el-input>
              </el-form-item>
              <el-form-item label="身份证有效期" prop="account_id_start_date">
                <el-date-picker
                  v-model="store_identication_form.account_id_start_date"
                  type="date"
                  placeholder="有效期开始日期">
                </el-date-picker>
                <el-date-picker
                  v-model="store_identication_form.account_id_end_date"
                  type="date"
                  placeholder="有效期结束日期">
                </el-date-picker>
                <el-checkbox v-model="store_identication_form.is_long_term">长期有效</el-checkbox>
              </el-form-item>
              <el-form-item label="联系邮箱" prop="email">
                <el-input placeholder="请输入联系邮箱" v-model="store_identication_form.email"></el-input>
              </el-form-item>
              <el-form-item label="打款方式">
                <!-- <span>{{store_identication_form.type}}</span> -->
                <el-radio v-model="store_identication_form.pay_to" :label="0">打款到”个人账号“</el-radio>
                <el-radio v-model="store_identication_form.pay_to" :label="1">打款到”公司公帐“</el-radio>
              </el-form-item>
              <el-form-item label="线上手续费" :rules="rate_up">
                <el-input placeholder="请输入汇付到线上手续费" v-model="store_identication_form.rate_up"></el-input>
              </el-form-item>
              <el-form-item label="线下手续费" :rules="rate_down">
                <el-input placeholder="请输入汇付到线下手续费" v-model="store_identication_form.rate_down"></el-input>
              </el-form-item>
              <el-form-item label="微信手续费" :rules="rate_wx">
                <el-input placeholder="请输入微信手续费" v-model="store_identication_form.rate_wx"></el-input>
              </el-form-item>
              <el-form-item label="汇付是否走线上" :rules="is_huifu_up">
                <el-radio-group v-model="store_identication_form.is_huifu_up" size="small">
                  <el-radio label="1">线上</el-radio>
                  <el-radio label="2">线下</el-radio>
                </el-radio-group>
              </el-form-item>
              <!------------------------银行卡信息------------------------>
              <p>银行卡信息</p>
              <el-form-item label="开户名称" prop="account_name">
                <el-input placeholder="请输入开户名称，如：张三" v-model="store_identication_form.account_name"></el-input>
              </el-form-item>
              <el-form-item label="银行卡卡号" prop="account_number">
                <el-input placeholder="请输入银行卡卡号" v-model="store_identication_form.account_number"></el-input>
              </el-form-item>
              <el-form-item label="开户行" prop="bank_id">
                <el-input placeholder="开户行" v-model="store_identication_form.bank_name"></el-input>
              </el-form-item>
              <el-form-item label="开户行支行" prop="branch_bank_id">
                <el-input placeholder="开户行支行" v-model="store_identication_form.branch_bank_name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitIndentication">保存</el-button>
                <el-button @click="handleNextStep">下一步</el-button>
              </el-form-item>
            </el-form>
            <el-form ref="huifuRegisterForm" :rules="huifu_register_rules" :model="huifu_register_form" v-if="active==1">
              <p>汇付进件</p>
              <!-- <el-form-item label="汇付账号" prop="tellerId">
                <el-input placeholder="汇付账号默认为手机号；如提示重复，请更换" v-model="huifu_register_form.tellerId"></el-input>
              </el-form-item> -->
              <el-form-item>
                <el-button @click="handlePreStep">上一步</el-button>
                <el-button type="primary" @click="handleSubmitHuifuRegisterForm">提交资料到汇付进件</el-button>
                <el-button @click="handleNextStep">下一步</el-button>
              </el-form-item>
            </el-form>
            <el-form ref="openBusinessForm" :model="open_business_form" v-if="active==2">
              <p>开通微信支付</p>
              <el-form-item>
                <el-button @click="handlePreStep">上一步</el-button>
                <el-button type="primary" @click="handleSubmitHuiOpenBusinessForm">提交资料到汇付开通微信支付业务</el-button>
                <!-- <el-button type="primary" >提交资料到汇付开通支付宝支付业务</el-button> -->
                <el-button @click="handleNextStep">下一步</el-button>
              </el-form-item>

            </el-form>
            <el-form ref="mpSettingForm" :model="mp_setting_form" v-if="active==3">
              <p>绑定微信公众号</p>
              <!-- <el-form-item label="汇付账号" prop="tellerId">
                <el-input placeholder="汇付账号默认为手机号；如提示重复，请更换" v-model="mp_setting_form.tellerId"></el-input>
              </el-form-item> -->
              <el-form-item>
                <el-button @click="handlePreStep">上一步</el-button>
                <el-button type="primary" @click="handleSubmitHuifuBindingWechatPublicNumberForm">提交资料到汇付绑定公众号</el-button>
                <el-button @click="handleNextStep">下一步</el-button>
              </el-form-item>
            </el-form>
            <el-form ref="splitForm" :model="split_form" v-if="active==4">
              <p>开通分账</p>
              <el-form-item>
                <el-button @click="handlePreStep">上一步</el-button>
                <el-button type="primary" @click="handleSubmitHuifuOpenSplitForm">提交资料到汇付开通分账</el-button>
                <el-button @click="handleNextStep">下一步</el-button>
              </el-form-item>
            </el-form>
            <el-form ref="walletForm"  :model="wallet_form" v-if="active==5">
              <p>开通钱包</p>
              <el-form-item>
                <el-button @click="handlePreStep">上一步</el-button>
                <el-button type="primary" @click="handleSubmitHuifuOpenWalletForm">提交资料到汇付开通钱包</el-button>
              </el-form-item>
            </el-form>
          </div>
      </el-tab-pane>
      <el-tab-pane label="线上课程推荐" name="线上课程推荐">
        <div style="margin:0 auto;height:800px;padding:50px 50px 100px;overflow:scroll;">
            <el-form label-position="left" :model="storeDataForm">
            <el-form-item label="是否开启线上课程推荐功能：" :label-width="formLabelWidth3" prop="name">
                <el-switch
                  v-model="storeDataForm.open_recommend"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#dbdbdb">
              </el-switch>
            </el-form-item>
            <el-form-item>
                <span style="margin-left:20px">开启线上课程推荐功能后，店铺在收款码界面将可以看到课程</span>
            </el-form-item>

            <el-form-item label="店铺新用户付款成功奖励设定：" :label-width="formLabelWidth3" prop="customer_id">
                <el-switch
                    v-model="storeDataForm.open_reward_new_user"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#dbdbdb"
                    @change="qingkong()">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <span style="display:block"></span>
                <span style="display:block">家长付款金额大于：<el-input style="width:100px;" v-model="storeDataForm.reward_new_user_pay_min" :disabled="storeDataForm.open_reward_new_user===1?false:true"></el-input></span>
                <span>奖励金额：<el-input style="width:100px;" v-model="storeDataForm.reward_new_user_money" :disabled="storeDataForm.open_reward_new_user===1?false:true"></el-input></span>
            </el-form-item>
            <el-form-item>
                <span style="margin-left:20px">开启店铺新人奖励后，必须满足2个条件，新授权用户，且家长付款金额大于{{storeDataForm.reward_new_user_pay_min}}元，将获取新人付款成功奖励</span>
            </el-form-item>

              <el-form-item label="招生老师收益金额设定：" :label-width="formLabelWidth3" prop="customer_id">
                <el-switch
                  v-model="storeDataForm.open_reward_teacher_money"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#dbdbdb"
                  @change="teacher_qingkong()">
                </el-switch>
              </el-form-item>
              <el-form-item>
                <span style="display:block"></span>
                <span style="display:block">家长付款金额大于：<el-input style="width:100px;" v-model="storeDataForm.reward_teacher_money_pay_min" :disabled="storeDataForm.open_reward_teacher_money===1?false:true"></el-input></span>
                <span>奖励金额：<el-input style="width:100px;" v-model="storeDataForm.reward_teacher_money_money" :disabled="storeDataForm.open_reward_teacher_money===1?false:true"></el-input></span>
              </el-form-item>
              <!--<el-form-item>-->
                <!--<span style="margin-left:20px">开启店铺新人奖励后，必须满足2个条件，新授权用户，且家长付款金额大于{{storeDataForm.reward_new_user_pay_min}}元，将获取新人付款成功奖励</span>-->
              <!--</el-form-item>-->

            <el-form-item label="会员等级名称:" :label-width="formLabelWidth3">
                <div>
                    <div>
                        <el-input style="width:100px;" v-model="storeDataForm.user_level"></el-input>
                        <span style="margin-left:10px;">可绑定的团队数量：</span>
                        <el-input style="width:100px;" type="number" v-model="storeDataForm.team_num"></el-input>
                    </div>
                </div>
                <span style="margin-left:-200px">会员等级名称，在手机端-我的-页面展示</span>
            </el-form-item>
            <!-- <el-form-item>
                <span style="margin-left:20px">会员等级名称，在手机端-我的-页面展示</span>
            </el-form-item> -->

            <el-form-item label="公司员工:" :label-width="formLabelWidth3" prop="contact">
                <el-input style="width:100px;" v-model="storeDataForm.company_staff_name" @change="editsubmit"></el-input>
                <el-dialog title="" :visible.sync="innerVisible" append-to-body>
                    <el-form>
                        <el-form-item label="店铺搜索：" :label-width="formLabelWidth3" prop="name">
                            <el-input v-model="listQuery.name" placeholder="请输入团队名称/电话/联系人" style="width:300px" @change="search"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                        </el-form-item>
                        <el-form-item>
                          <span v-for="(o,index) in storeList" :key="index" style="margin-right:20px">{{o.name}}</span>
                        </el-form-item>
                        <el-form-item>
                            <el-row>
                                <el-col :span="8" v-for="(o,index) in allteam" :key="o" :offset="index > 0 ? 0 : 0" style="margin-left:100px;margin-right:30px;margin-top:10px">
                                    <el-checkbox v-model="addteams" :label="o.customer_store_id" :disabled="storeDataForm.team_num<=addteams.length">{{o.customer_store_id}}</el-checkbox>
                                    <el-card :body-style="{ padding: '20px' }">
                                              <div style="height:95px">
                                                  <span class="card"><img :src="o.store_logo" style="width:80px;height:80px;border-radius: 100%;"></span>
                                                  <span class="add_card_text">
                                                      <p>{{o.name}}</p>
                                                      <p>{{o.telephone}}</p>
                                                      <p>{{o.contact}}</p>
                                                  </span>
                                              </div>
                                      </el-card>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>
                    <div class="pagination-container">
                      <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancelSubmit">取 消</el-button>
                        <el-button type="primary" @click="addsubmit()">确 定</el-button>
                    </div>
                </el-dialog>
                <el-button type="primary" :disabled="storeDataForm.team_num<=addteams.length" @click="add()">绑定团队</el-button>
            </el-form-item>

            <el-form-item label="已经绑定下级团队列表：" :label-width="formLabelWidth3">
                <span style="color:#00F5FF;">{{storeList.length}}</span><span style="margin-left:20px">个</span>
            </el-form-item>
            <el-form-item>
              <!-- <span>{{storeList}}</span> -->
                <el-row>
                    <el-col :span="8" v-for="(o, index) in storeList" :key="o" :offset="index > 0 ? 0 : 0" style="margin-right:30px;margin-top:10px">
                        <el-card :body-style="{ padding: '20px'}">
                        <div style="height:55px">
                            <span class="card"><img :src="o.store_logo" class="image"></span>
                            <span class="card_text">{{o.name}}</span>
                            <el-popover
                                placement="top"
                                width="160"
                                v-model="o.visible">
                                <p>你确定要删除该绑定团队吗？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="mini" type="text" @click="o.visible = false">取消</el-button>
                                    <el-button type="primary" size="mini" @click="delList(index)">确定</el-button>
                                </div>
                                <el-button type="text" class="button" slot="reference" @click="showdel(index)">删除</el-button>
                            </el-popover>
                        </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer" style="position: relative; left: 90px">
                <el-button @click="cancelSubmit">取 消</el-button>
                <el-button type="primary" @click="submitStore('storeDataForm')">确 定</el-button>
            </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <transition name="el-zoom-in-top">
      <div v-show="bigImageSrc !== null && bigImageSrc!==''" class="bigImg" @click="bigImage(null)">
        <img :src="bigImageSrc" style="width:auto; height:400px;border-radius:5px;">
      </div>
    </transition>

  </el-dialog>
</template>

<script>
  import {list as getBankList} from '@/api/thk/cms/bank'
  import {edit} from '@/api/thk/store'
  import { client } from '@/utils/alioss'
  import {update_identification,register,open_business,open_business2,mpsettingH5,mpsetting,activate_split,activate_wallet} from '@/api/thk/huifu'
  import store from '@/store'
  import {list,del,getSubject} from '@/api/thk/store'
  // import part3 from './part3'
  export default {
    name: 'detailBindCard',
    data(){
      return{
        // tbc:["1","2","3","4","5"],
        listQuery: {
          name: undefined,
          status:undefined,
          page: 1,
          pagesize: 10
        },
        addteams:[],
        allteam:[],
        searchkey:'',
        innerVisible:false,
        subject:[],
        formLabelWidth: '130px',
        formLabelWidth3: '220px',
        activeName: '编辑店铺',
        storeData: null,
        showDetailStoreDialog: false,
        customerList: [],
        bigImageSrc: null,
        storeDataForm: {
          customer_store_id: '',
          name: '',
          customer_id: '',
          province: '',
          introduction_title: '',
          city: '',
          country: '',
          address: '',
          contact: '',
          telephone: '',
          wechat_qrcode: '',
          group_qrcode: '',
          is_recommend:0,
          introduction_img: '',
          date_added: '',
          date_modified: '',
          expire_date:'',
          member_price:'',
          store_img:'',
          store_logo:'',
          store_introduction:'',
          subject:'',
          rate:'',
          wx_rate:'',
          rate_status:'1',
          display_button:false,
          open_recommend:0,
          open_reward_new_user:0,
          open_reward_teacher_money:0,
          reward_new_user_pay_min:0,
          reward_new_user_money:0,
          reward_teacher_money_pay_min:0,
          reward_teacher_money_money:0,
          team_num:0,
          user_level:0,
          company_staff_name:undefined,
          team_customer_store_id:undefined
        },
        addressList: [],
        provinceAndCityList: [],
        organizationList: [],

        // 表单校验规则
        rules: {
          // 店铺名为必须
          name:[
            // { required: true, message: '请输入店铺名称', trigger: 'blur' },
          ],
          telephone:[
            // { required: true, message: '请输手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '长度必须为11位', trigger: 'blur' }
          ],
          customer_id: [
            // { required: true, message: '请选择用户', trigger: 'change' }
          ],

          // contact: [
          //   { required: true, message: '请选择联系人', trigger: 'change' }
          // ],
          rate_up:[
            {required: true, message: '请输入线上手续费', trigger: 'blur'}
          ],
          rate_down:[
            {required: true, message: '请输入线下手续费', trigger: 'blur'}
          ],
          rate_wx:[
            {required: true, message: '请输入微信手续费', trigger: 'blur'}
          ],
          is_huifu_up:[
            {required: true, message: '请选择是否汇付到线上', trigger: 'blur'}
          ]

        },
        active:0,
        store_identication_rules:{
          organization_name:[
            { required: true, message: '请输入机构名称', trigger: 'blur' },
          ],
          company_name:[{
            validator (rule, value, callback) {
              if(this.store_identication_form.type===1){
                if(!value){
                  callback(new Error('请输入公司名称'))
                }else{
                  callback({ required: true, message: '请输入机构名称', trigger: 'blur' })
                }
              }
            }
          }],
          business_licences:'',
          unified_social_credit_code:[{
            validator (rule, value, callback) {
              if(this.store_identication_form.type===1){
                if(!value){
                  callback(new Error('请输入统一社会信用代码'))
                }
              }
            }
          }],
          province_id:0,
          city_id:0,
          country_id:0,
          address:[
            { required: true, message: '请输入详细地址', trigger: 'blur' },
          ],
          door_photo:[
            { required: true, message: '请输入详细地址', trigger: 'blur' },
          ],
          in_store_photo:'',
          in_store_photo2:'',
          email:[
            { required: true, message: '请输入联系邮箱', trigger: 'blur' },
          ],
          name_of_cardholder:[
            { required: true, message: '请输入法人姓名', trigger: 'blur' },
          ],
          id_of_cardholder:[
            { required: true, message: '请输入身份证号码', trigger: 'blur' },
          ],
          // account_id_start_date:'',
          // account_id_end_date:'',
          // is_long_term:0,
          // front_of_account_image:'',
          // back_of_account_image:'',
          // pay_to:0,
          account_name:[
            { required: true, message: '请输入开户名称', trigger: 'blur' },
          ],
          account_number:[
            { required: true, message: '请输入银行卡卡号', trigger: 'blur' },
          ],
          // bank_id:'',
          // branch_bank_id:'',
          // status:0,
          // date_added:'',
          // date_modified:'',
        },
        store_identication_form:{
          customer_store_identification_id:0,
          store_id:0,
          type:0,
          organization_name:'',
          company_name:'',
          business_licences:'',
          unified_social_credit_code:'',
          province_id:0,
          city_id:0,
          country_id:0,
          address:'',
          door_photo:'',
          in_store_photo:'',
          in_store_photo2:'',
          email:'',
          name_of_cardholder:'',
          id_of_cardholder:'',
          account_id_start_date:'',
          account_id_end_date:'',
          is_long_term:0,
          front_of_account_image:'',
          back_of_account_image:'',
          pay_to:0,
          account_name:'',
          account_number:'',
          bank_id:'',
          branch_bank_id:'',
          status:0,
          type:'',
          rate_down:'',
          rate_up:'',
          rate_wx:'',
          is_huifu_up:undefined,
          // date_added:'',
          // date_modified:'',
        },
        huifu_register_rules:{
          tellerId:[
            { required: true, message: '请输入管理员账号', trigger: 'blur' },
          ],
        },
        storeList:[],
        //提交汇付进件的数据
        huifu_register_form:{
          store_id:0,
          type:0,
          organization_name:'',
          company_name:'',
          business_licences:'',
          unified_social_credit_code:'',
          province_id:0,
          city_id:0,
          country_id:0,
          address:'',
          door_photo:'',
          in_store_photo:'',
          in_store_photo2:'',
          email:'',
          name_of_cardholder:'',
          id_of_cardholder:'',
          account_id_start_date:'',
          account_id_end_date:'',
          is_long_term:0,
          front_of_account_image:'',
          back_of_account_image:'',
          pay_to:0,
          account_name:'',
          account_number:'',
          bank_id:'',
          branch_bank_id:'',
          status:0,
          date_added:'',
          date_modified:'',
        },
        //提交汇付开通微信支付数据
        open_business_form:{

        },
        total:'',

        //提交资料给汇付绑定公众号
        mp_setting_form:{
        },

        //提交资料给汇付开通分账
        split_form:{

        },

        //提交资料给汇付开通钱包
        wallet_form:{

        },
        part3List:{}
      }
    },
    inject: ['reload'],
    created(){
      console.log('storeData',this.storeData);
    },

    methods:{
      showdel(index){
        console.log(index)
        for(let i=0;i<this.storeList.length;i++){
          if(i===index){
            console.log(this.storeList[index].visible)
            this.storeList[index].visible=true
            console.log(this.storeList)
          }else{
            this.storeList[i].visible=false
          }
        }
      },
      delList(index){
        for(let i=0;i<this.addteams.length;i++){
          if(this.addteams[i]===this.storeList[index].customer_store_id){
            this.addteams.splice(i,1)
            this.storeList.splice(index,1)
            console.log(this.addteams,this.storeList)
            this.storeDataForm.team_customer_store_id=""
            this.addteams.filter(res=>{
              if(this.storeDataForm.team_customer_store_id==""){
                this.storeDataForm.team_customer_store_id+=res
              }else{
                this.storeDataForm.team_customer_store_id+=","+res
              }
            })
          }
        }
      },
      qingkong(){
        if(this.storeDataForm.open_reward_new_user==0){
          this.storeDataForm.reward_new_user_pay_min=0;
          this.storeDataForm.reward_new_user_money=0;
        }else{

        }
      },
      teacher_qingkong(){
        if(this.storeDataForm.open_reward_teacher_money==0){
          this.storeDataForm.reward_teacher_money_pay_min=0;
          this.storeDataForm.reward_teacher_money_money=0;
        }else{

        }
      },
      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getStoreList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getStoreList()
      },
      getStoreList(){
        list(store.getters.token, this.listQuery).then(res =>{
          this.total = res.data.list.total
          this.allteam = res.data.list.data
          console.log(">>>>> storeList")
          console.log(this.allteam,"11111111111111111111111111111")
        },error => {
          console.log(error)
        })
      },
      add(){
          this.innerVisible=!this.innerVisible;
          this.getStoreList()
          // this.storeDataForm.teams.push({url:this.storeDataForm.teams[0].url,username:this.storeDataForm.employeename})
      },
      editsubmit(){
        edit(store.getters.token,this.storeDataForm).then(res=>{

        })

      },
      addsubmit(){
        this.storeDataForm.team_customer_store_id=""
        this.addteams.filter(res=>{
          if(this.storeDataForm.team_customer_store_id==""){
            this.storeDataForm.team_customer_store_id+=res
          }else{
            this.storeDataForm.team_customer_store_id+=","+res
          }
        })
        edit(store.getters.token,this.storeDataForm).then(res=>{
          this.$message.success('修改成功')
          this.showDetailStoreDialog = !this.showDetailStoreDialog
          this.listQuery.page= 1;
          this.listQuery.pagesize= 10;
          this.reload()
        })
        // console.log(this.storeDataForm.team_customer_store_id,"9770")
      },
      search(){
        this.getStoreList()
      },
      switchchange(row){
        if(row=='recommend'){
          this.storeDataForm.open_recommend==0?1:0
          console.log("改变了",this.storeDataForm)
        }else{
          console.log("改变了",this.storeDataForm)
          this.storeDataForm.open_reward_new_user==0?1:0
        }
      },
      handleClick(tab,event){
        console.log(tab,event)
        if(this.activeName==='线上课程推荐'){
          this.$refs.part.showDetailDialog(this.part3List)
        }
      },
      up_is_display_button(){
        console.log("进来了了")
        this.storeDataForm.display_button=!this.storeDataForm.display_button
      },
      showDetailDialog(row,storeList,customerList,provinceAndCityList,organizationList,subject){
        this.storeList=[]
        this.addteams=[]
        // storeList.forEach(element => {
        //   this.storeList.push(element)
        // });
        console.log(row,storeList,customerList,provinceAndCityList,organizationList,subject,"List")
        console.log(row,'showDetailDialog')
        storeList.filter(res=>{
          res.visible=false
          this.storeList.push(res)
        })
        this.storeDataForm.customer_id = row.customer_id
        this.storeDataForm.customer_store_id = row.customer_store_id
        this.storeDataForm.name = row.name
        if(row.province!=null&&row.city!=null&&row.country){
          this.storeDataForm.province = row.province.province_id
          this.addressList.push(row.province.province_id)
          this.storeDataForm.city = row.city.city_id
          this.addressList.push(row.city.city_id)
          this.storeDataForm.country = row.country !== null ? row.country.country_id : ''
          this.addressList.push(row.country.country_id)
        }else{
          this.addressList=[440000,440300,440307]
        }
        this.storeDataForm.address = row.address
        this.storeDataForm.contact = row.contact
        this.storeDataForm.telephone = row.telephone
        this.storeDataForm.wechat_qrcode = row.wechat_qrcode
        this.storeDataForm.introduction_title = row.introduction_title
        this.storeDataForm.is_recommend = row.is_recommend
        this.storeDataForm.group_qrcode = row.group_qrcode
        this.storeDataForm.introduction_img = row.introduction_img
        this.storeDataForm.date_added = row.date_added
        this.storeDataForm.date_modified = row.date_modified
        this.storeDataForm.expire_date = row.expire_date
        this.storeDataForm.member_price = row.member_price
        // 四期新增
        this.storeDataForm.store_logo=row.store_logo
        this.storeDataForm.rate=row.rate
        this.storeDataForm.store_img=row.store_img
        this.storeDataForm.store_introduction=row.store_introduction
        this.storeDataForm.display_button=row.is_display_button===1 ? true:false
        console.log("没到")
        if(row.subjects_id!=null){
          console.log(row.subjects_id)
          this.storeDataForm.subjects_id=row.subjects_id.split(",");
        }
        this.subject=subject.map(res=>{
          res.ids=res.id.toString()
          return res
        })
        //四期新增
        this.storeDataForm.open_recommend=row.open_recommend
        // this.storeDataForm.is_open_recommend=row.open_recommend==0?false:true
        this.storeDataForm.open_reward_new_user=row.open_reward_new_user
        // this.storeDataForm.is_open_reward_new_user=row.open_reward_new_user==0?false:true
        this.storeDataForm.reward_new_user_pay_min=row.reward_new_user_pay_min
        this.storeDataForm.reward_new_user_money=row.reward_new_user_money
        this.storeDataForm.open_reward_teacher_money=row.open_reward_teacher_money
        this.storeDataForm.reward_teacher_money_pay_min=row.reward_teacher_money_pay_min
        this.storeDataForm.reward_teacher_money_money=row.reward_teacher_money_money
        this.storeDataForm.user_level=row.user_level
        this.storeDataForm.team_num=row.team_num | 0
        this.storeDataForm.company_staff_name=row.company_staff_name
        this.storeDataForm.team_customer_store_id=row.team_customer_store_id
        console.log(this.storeDataForm.team_customer_store_id,"idsss")
        if(this.storeDataForm.team_customer_store_id){

          this.storeDataForm.team_customer_store_id.split(',').filter(res=>{
            this.addteams.push(Number(res))
          })
        }
        console.log(this.addteams,"allteams")
        console.log('>>> storeDataForm',this.storeDataForm)

        this.storeData = row
        this.customerList = customerList
        this.provinceAndCityList = provinceAndCityList
        console.log('>>> province',this.provinceAndCityList)
        this.organizationList = organizationList

        // 修改label属性
        this.changeCityData()

        // this.addressList = []
        // this.addressList.push(this.storeDataForm.province)
        // this.addressList.push(this.storeDataForm.city)
        // this.addressList.push(this.storeDataForm.country)
        this.showDetailStoreDialog = !this.showDetailStoreDialog
        //获取绑卡信息
        console.log("确认一下",row)
        if(row.account && row.account.length>0){
          const identication = row.account[0]
          // console.log("确认一下",row)
          console.log(identication,"");
          this.store_identication_form = {
            rate:row.rate,
            customer_store_identification_id:identication.customer_store_identification_id,
            store_id:identication.store_id,
            type:identication.type,
            organization_name:identication.organization_name,
            company_name:identication.company_name,
            business_licences:identication.business_licences,
            unified_social_credit_code:identication.unified_social_credit_code,
            province_id:identication.province_id,
            city_id:identication.city_id,
            country_id:identication.country_id,
            address:identication.address,
            door_photo:identication.door_photo,
            in_store_photo:identication.in_store_photo,
            in_store_photo2:identication.in_store_photo2,
            email:identication.email,
            name_of_cardholder:identication.name_of_cardholder,
            id_of_cardholder:identication.id_of_cardholder,
            account_id_start_date:identication.account_id_start_date,
            account_id_end_date:identication.account_id_end_date,
            is_long_term:identication.is_long_term,
            front_of_account_image:identication.front_of_account_image,
            back_of_account_image:identication.back_of_account_image,
            pay_to:identication.pay_to,
            account_name:identication.account_name,
            account_number:identication.account_number,
            bank_name:identication.bank_id.bankname,
            bank_id:identication.bank_id.bankid,
            branch_bank_id:identication.branch_bank_id.number,
            branch_bank_name:identication.branch_bank_id.branchname,
            status:identication.status,
            rate_down:row.rate_down,
            rate_up:row.rate_up,
            rate_wx:row.rate_wx,
            is_huifu_up:row.is_huifu_up.toString()
          }

        }else{

            this.store_identication_form = {
            customer_store_identification_id:row.customer_store_id,
            store_id:row.customer_store_id,
            type:0,
            organization_name:'',
            company_name:'',
            business_licences:'',
            unified_social_credit_code:'',
            province_id:0,
            city_id:0,
            country_id:0,
            address:'',
            door_photo:'',
            in_store_photo:'',
            in_store_photo2:'',
            email:'',
            name_of_cardholder:'',
            id_of_cardholder:'',
            account_id_start_date:'',
            account_id_end_date:'',
            is_long_term:0,
            front_of_account_image:'',
            back_of_account_image:'',
            pay_to:0,
            account_name:'',
            account_number:'',
            bank_name:'',
            bank_id:0,
            branch_bank_id:0,
            branch_bank_name:'',
            status:0,
          }
        }
        console.log(this.addressList)
      },
      handleChanges(e){
        console.log(e)
      },
      handleChangeType(e){
        console.log(e,'handleChangeType')
      },
      handlePreStep(e){
        console.log(e,'handleNextStep')
        if(this.active<=0){
          return false
        }
        this.active = this.active - 1
      },
      handleNextStep(e){
        console.log(e,'handleNextStep')
        if(this.active>4){
          return false
        }
        this.active = this.active + 1
      },
      // 保存店铺信息
      submitStore(storeDataForm){
        console.log(">>>>> store data >>>>>>>>")
        console.log(this.storeDataForm)
        this.storeDataForm.is_display_button=this.storeDataForm.display_button ? 1:2
        this.storeDataForm.user_level=this.storeDataForm.user_level
        // this.storeDataForm.team_customer_store_id=""
        this.$refs.storeDataForm.validate((valid) => {
          console.log(valid)
          if (valid) {
            edit(store.getters.token,this.storeDataForm).then(result => {
              // 修改成功
              this.showDetailStoreDialog = !this.showDetailStoreDialog
              this.$message.success('修改成功')
              this.$parent.getStoreList()
              this.reload()
            }).catch(error => {
              console.log(error)
              this.$message('修改失败')
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 根据用户id返回用户名,用于显示店铺所属用户
      getCustomerName(customer_id){
        let customer = this.customerList.find(customer => {
          return customer.customer_id == customer_id
        })

        if(customer){
          return customer.nickname
        }

        return ''
      },
      // 大图弹窗函数
      bigImage(src) {
        if (src!==null) {
          this.$set(this, 'bigImageSrc', src)
          console.log(this.bigImageSrc)
        } else {
          this.$set(this, 'bigImageSrc', null)
        }
      },
      // 转换省份数据
      changeCityData(){
        console.log("changeCityList",this.provinceAndCityList)
        let data = {data: this.provinceAndCityList}
        let str = JSON.stringify(data).replace(/province_id/g,'value')
        str = str.replace(/province/g,'label')

        str = str.replace(/city_id/g,'value')
        str = str.replace(/city/g,'label')

        str = str.replace(/country_id/g,'value')
        str = str.replace(/country/g,'label')

        data = JSON.parse(str)
        this.provinceAndCityList = data.data

        console.log(">>>>>> province >>>>>")
        console.log(this.provinceAndCityList)
      },
      handleChange(value){
        console.log(this.addressList,"8888888888");
        if(value){
          console.log(value)
          this.storeDataForm.province = value[0]
          this.storeDataForm.city = value[1]
          this.storeDataForm.country = value[2]
          console.log(this.storeDataForm,"wobianle");
          this.store_identication_form.province_id=value[0]
          this.store_identication_form.city_id=value[1]
          this.store_identication_form.country_id=value[2]
        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_picture(file) {
        const that = this
        const fileName = 'user-admin_user-picture' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.storeDataForm, 'wechat_qrcode', res.url)

          // that.storeList.wechat_qrcode = res.url
          console.log(res.url);
          that.$message.success('头像地址上传成功！')
        }).catch((err) => {
          that.$message.error('头像地址上传失败，原因：' + err)
        })
      },

      beforeAvatarUpload_group(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_picture_group(file) {
        const that = this
        const fileName = 'user-admin_user-picture' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.storeDataForm, 'group_qrcode', res.url)

          // that.storeList.group_qrcode = res.url
          console.log(res.url);
          that.$message.success('群二维码上传成功！')
        }).catch((err) => {
          that.$message.error('群二维码上传失败，原因：' + err)
        })
      },
      before_introduction_img_Upload_group(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_picture_introduction_img(file) {
        const that = this
        const fileName = 'user-admin_user-picture' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.storeDataForm, 'introduction_img', res.url)

          // that.storeList.introduction_img = res.url
          console.log(res.url);
          that.$message.success('课程图片上传成功！')
        }).catch((err) => {
          that.$message.error('课程图片上传失败，原因：' + err)
        })
      },
      upload_picture_store_img(file) {
        const that = this
        const fileName = 'user-admin_user-picture' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.storeDataForm, 'store_img', res.url)

          // that.storeList.introduction_img = res.url
          console.log(res.url);
          that.$message.success('课程图片上传成功！')
        }).catch((err) => {
          that.$message.error('课程图片上传失败，原因：' + err)
        })
      },
      upload_picture_store_logo(file) {
        const that = this
        const fileName = 'user-admin_user-picture' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.storeDataForm, 'store_logo', res.url)

          // that.storeList.introduction_img = res.url
          console.log(res.url);
          that.$message.success('课程图片上传成功！')
        }).catch((err) => {
          that.$message.error('课程图片上传失败，原因：' + err)
        })
      },
      /********* 营业执照上传 start*******/
      beforeBusinessLicencesUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },

      upload_business_licences(file){
        const that = this
        const fileName = 'business-licences' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.store_identication_rules, 'business_licences', res.url)
          console.log(res.url);
          that.$message.success('营业执照上传成功！')

        }).catch((err) => {

          that.$message.error('营业执照上传失败，原因：' + err)
        })
      },
      /********* 营业执照上传 end*******/
      /**********公司前台照/门头照 start***********/
      beforeDoorPhotoUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_door_photo(file){
        const that = this
        const fileName = 'door-photo' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.store_identication_form, 'door_photo', res.url)
          console.log(res.url);
          if(that.store_identication_rules.type === 1){
            that.$message.success('公司前台照上传成功！')
          }else{
            that.$message.success('门头照上传成功！')
          }


        }).catch((err) => {

          if(that.store_identication_rules.type === 1){
            that.$message.error('公司前台照上传失败，原因：'+ err)
          }else{
            that.$message.error('门头照上传失败，原因：'+err)
          }
        })
      },
      /**********公司前台照/门头照 end***********/
      /***********店内环境照/公司环境照1 start**********/
      beforeInStorePhotoUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_in_store_photo(file){
        const that = this
        const fileName = 'in-store-photo' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          // console.log(that.store_identication_rules)
          that.$set(that.store_identication_form,'in_store_photo', res.url)
          console.log(res.url);
          if(that.store_identication_form.type === 1){
            that.$message.success('公司环境照上传成功！')
            console.log(that.store_identication_form)
            // this.$set(that.store_identication_form,'in_store_photo',res.url)
            // this.store_identication_form.in_store_photo=res.url
          }else{
            that.$message.success('店内环境照上传成功！')
            console.log(that.store_identication_form)
            // this.$set(that.store_identication_form,'in_store_photo',res.url)
            // this.store_identication_form.in_store_photo=res.url
          }

        }).catch((err) => {

          if(that.store_identication_rules.type === 1){
            that.$message.error('公司环境照上传失败，原因：'+ err)
          }else{
            that.$message.error('店内环境照上传失败，原因：'+err)
          }
        })
      },

      /***********公司环境照2********** */
      beforeInStorePhoto2Upload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_in_store_photo2(file){
        const that = this
        const fileName = 'in-store-photo2' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          console.log(res.url);
          that.$message.success('公司环境照2上传成功！')
          this.$set(that.store_identication_form,'in_store_photo2',res.url)
          // that.store_identication_form.in_store_photo2=res.url
        }).catch((err) => {

          that.$message.error('公司环境照2上传失败，原因：' + err)
        })
      },

      //身份证正面
      beforeFrontOfAccountImageUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_front_of_account_image(file){
        const that = this
        const fileName = 'front-of-account-image' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.store_identication_rules, 'front_of_account_image', res.url)
          console.log(res.url);
          that.$message.success('身份证正面上传成功！')

        }).catch((err) => {

          that.$message.error('身份证正面上传失败，原因：' + err)
        })
      },

      // 身份证背面
      beforeBackOfAccountImageUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return (isJPG | isPNG) && isLt2M
      },
      upload_back_of_account_image(file){
        const that = this
        const fileName = 'back-of-account-image' + file.file.uid
        client().put(fileName, file.file).then((res) => {
          this.$set(that.store_identication_rules, 'back_of_account_image', res.url)
          console.log(res.url);
          that.$message.success('身份证反面上传成功！')

        }).catch((err) => {

          that.$message.error('身份证反面上传失败，原因：' + err)
        })
      },

      cancelSubmit(){
        this.$message.success('取消提交')
        console.log(this.storeList)
        // this.showDetailStoreDialog = !this.showDetailStoreDialog
      },

      //保存绑卡信息并提交汇付进件
      submitIndentication(){
        console.log("123")
        console.log(this.store_identication_form);
        console.log('submitIndentication',this.$refs)
        this.store_identication_form.province_id=this.addressList[0]
        this.store_identication_form.city_id=this.addressList[1]
        this.store_identication_form.country_id=this.addressList[2]
        console.log("999999999",store.getters.token,this.store_identication_form)
        this.$refs.storeIdentificationForm.validate((valid) => {
          if (valid) {

            update_identification(store.getters.token,this.store_identication_form).then(result => {
              this.$message({
                type: 'success',
                message: result.data.msg
              });
            }).catch(error => {
              console.log(error)
              this.$message('进件失败')
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      /**********************提交汇付进件********************/
      handleSubmitHuifuRegisterForm(){

        const store_id = this.store_identication_form.store_id
        const data = {
          store_id,
        }
        register(store.getters.token,data).then(res => {
          console.log(res,'res')
          if(res.data.status){

              this.$message({
                message: res.data.msg,
                type: 'success'
              })

          }else{
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }

        }).catch(err => {

          this.$message({
            message: err,
            type: 'error'
          })
        })
      },

      /************开通微信支付业务***********/
      handleSubmitHuiOpenBusinessForm(){
        const store_id = this.store_identication_form.store_id
        const data = {
          store_id,
        }
        open_business(store.getters.token,data).then(res => {
          console.log(res,'res')
          if(res.data.status){

              this.$message({
                message: res.data.msg+"请等待下个提示",
                type: 'success'
              })
              setTimeout(()=>{
                open_business2(store.getters.token,data).then(ress => {
                  console.log(ress,'res')
                  if(ress.data.status){

                      this.$message({
                        message: ress.data.msg,
                        type: 'success'
                      })

                  }else{
                    this.$message({
                      message: ress.data.msg,
                      type: 'error'
                    })
                  }

                }).catch(err => {

                  this.$message({
                    message: err,
                    type: 'error'
                  })
                })
              },3000)

          }else{
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }

        }).catch(err => {

          this.$message({
            message: err,
            type: 'error'
          })
        })
      },

      /**************绑定公众号******************/
      handleSubmitHuifuBindingWechatPublicNumberForm(){
        const store_id = this.store_identication_form.store_id
        const data = {
          store_id,
        }
        mpsettingH5(store.getters.token,data).then(res => {
          console.log(res,'res')
          if(res.data.status){
              this.$message({
                message: res.data.msg+"再稍等下一个提示",
                type: 'success'
              })
              mpsetting(store.getters.token,data).then(res => {
                console.log(res,'res')
                if(res.data.status){
                    this.$message({
                      message: res.data.msg,
                      type: 'success'
                    })
                }else{
                  this.$message({
                    message: res.data.msg,
                    type: 'error'
                  })
                }
              }).catch(err => {
                this.$message({
                  message: err,
                  type: 'error'
                })
              })
          }else{
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        }).catch(err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
      },

      handleSubmitHuifuOpenSplitForm(){

        const store_id = this.store_identication_form.store_id
        const data = {
          store_id,
        }
        activate_split(store.getters.token,data).then(res => {
          console.log(res,'res')
          if(res.data.status){

              this.$message({
                message: res.data.msg,
                type: 'success'
              })

          }else{
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }

        }).catch(err => {

          this.$message({
            message: err,
            type: 'error'
          })
        })
      },

      handleSubmitHuifuOpenWalletForm(){
        const store_id = this.store_identication_form.store_id
        const data = {
          store_id,
        }
        activate_wallet(store.getters.token,data).then(res => {
          console.log(res,'res')
          if(res.data.status){

              this.$message({
                message: res.data.msg,
                type: 'success'
              })

          }else{
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }

        }).catch(err => {

          this.$message({
            message: err,
            type: 'error'
          })
        })
      },



    },
    computed:{

    }
  }
</script>

<style scoped>


  .left {
    flex: 1;
  }

  .left>div{
    display: flex;
    margin-bottom: -5px;
  }


  .left>div>span:first-child{
    flex: 2;
    text-align: right;
    font-weight: 600;
    padding: 10px 0;
    /*color: #000;*/
  }



  .left>div>span:last-child{
    flex: 3;
    text-align: left;
    margin-left: 10px;
    padding: 10px 0;
  }

  img{
    height: 50px;
    width: 50px;
    margin-right: 5px;
  }



  .first-span{
    display: inline-block;
    margin-left: 30px;
  }


  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }
  .huifu-btn{
    margin-left: 35px;
    margin-top: 20px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    margin-top: -7px;
    float: right;
  }

  .image {
    /* width: 100%; */
    border-radius: 100%;
    /* line-height: 200px; */
  }

  .clearfix:before,
  .clearfix:after {
      content: "";
  }

  .clearfix:after {

  }
  .card{
      height: 30px;
      width: 80px;
      display:inline-block;
      float: left;
  }
  .card_text{
      margin-left: 20px;
      margin-top: 7px;
      height: 30px;
      width: 80px;
      display:inline-block;
      float: left;
  }
  .add_card_text{
      margin-left: 20px;
      margin-top:-10px;
      height: 100px;
      width: 100px;
      display:inline-block;
      float: left;
  }
  .add_card_text p{
    margin:0;
    padding:0;
  }
</style>
